import React, {useEffect, useState} from 'react';
import ProForm, { ProFormDateRangePicker, ProFormRadio, ProFormText, QueryFilter} from "@ant-design/pro-form";
import {StatisticCard} from "@ant-design/pro-card";
import {disManagementPersonList, disManagementSearchCard} from "@/services/ant-design-pro/distribution";



const ManagementSearch = () => {
  // 定义搜索表单参数的状态
  const [searchValues,setSearchValue] = useState({})
  // 定义卡片内容的状态
  const [cardValues,setCardValue] = useState([])
  useEffect(async ()=>{
    // 请求卡片内容的API
    await disManagementSearchCard().then(res=>{
      setCardValue(res)
    })
    // 请求搜索API  与管理员列表API相同
    await disManagementPersonList({}).then(res=>{
      console.log('xxxx',res);
    })

  },[])

  return (
    <div>
      <div style={{background:'#fff',padding:'20px 20px'}}>
         {/*使用筛选表单 QueryFilter*/}
        <QueryFilter
          defaultCollapsed={false}
          onChange={(value)=>{
            // console.log('11111',value.target.defaultValue);
          }}
          onValuesChange={(value)=>{
            console.log('2222',value);
            console.log(Object.keys(value)[0]);
          }}
        >

          <ProForm.Group>
            <ProFormRadio.Group
              colSize={3}
              label='留言时间：'
              name="radio"
              radioType="button"
              initialValue='yearly'
              options={[
                {
                  value: 'all',
                  label: '每周',
                },
                {
                  value: 'today',
                  label: '每周',
                },
                {
                  value: 'yesterday',
                  label: '昨天',
                },
                {
                  value: 'sevenDays',
                  label: '最近七天',
                },
                {
                  value: 'thirtyDays',
                  label: '最近30天',
                },
                {
                  value: 'monthly',
                  label: '本月',
                },
                {
                  value: 'yearly',
                  label: '本年',
                },
              ]}
            />
            <ProFormText name="sousuo" label="搜索"  placeholder='请输入姓名、电话、UID'/>

            <ProFormDateRangePicker name="dateRange" colSize={2} wrapperCol={{span:8}} />

          </ProForm.Group>

        </QueryFilter>

      </div>
      <StatisticCard.Group direction={'row'} size={'default'} gutter={10} style={{marginTop:'20px',background:'#F0F2F5'}}>
        <StatisticCard
          colSpan={6}
          bordered
          statistic={{
            value:  cardValues[0]?.promoter_count ?? '',
            description: cardValues[0]?.name,
            icon: (
              <img
                style={{display: 'block', width: 60, height: 60,}}
                src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*pUkAQpefcx8AAAAAAAAAAABkARQnAQ"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          colSpan={6}
          bordered
          statistic={{
            value: cardValues[1]?.is_promoter ?? '',
            description: cardValues[1]?.name,
            icon: (
              <img
                style={{display: 'block', width: 60, height: 60,}}
                src=" https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*dr_0RKvVzVwAAAAAAAAAAABkARQnAQ"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          colSpan={6}
          bordered
          statistic={{
            value: cardValues[2]?.orders ?? '',
            description: cardValues[2]?.name,
            icon: (
              <img
                style={{display: 'block', width: 60, height: 60,}}
                src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*-jVKQJgA1UgAAAAAAAAAAABkARQnAQ"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          colSpan={6}
          bordered
          statistic={{
            value: cardValues[3]?.order_price ?? '',
            description: cardValues[3]?.name,
            icon: (
              <img
                style={{display: 'block', width: 60, height: 60,}}
                src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*FPlYQoTNlBEAAAAAAAAAAABkARQnAQ"
                alt="icon"
              />
            ),
          }}
        />
      </StatisticCard.Group>
      <StatisticCard.Group direction={'row'} size={'default'} gutter={8} style={{marginBottom:'20px',paddingTop:'15px',background:'#F0F2F5'}}>
        <StatisticCard
          colSpan={6}
          bordered
          statistic={{
            value: cardValues[4]?.extract_num ?? '',
            description: cardValues[4]?.name,
            icon: (
              <img
                style={{display: 'block', width: 60, height: 60,}}
                src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*FPlYQoTNlBEAAAAAAAAAAABkARQnAQ"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          colSpan={6}
          bordered
          statistic={{
            value: cardValues[5]?.has_amount ?? '',
            description: cardValues[5]?.name,
            icon: (
              <img
                style={{display: 'block', width: 60, height: 60,}}
                src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*FPlYQoTNlBEAAAAAAAAAAABkARQnAQ"
                alt="icon"
              />
            ),
          }}
        />
      </StatisticCard.Group>
    </div>
  );
};

export default ManagementSearch;
